<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Student interface</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/moment.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
			#content{
				display: flex;
				/* width: 90%; */
				/* border: solid red; */
				margin: 0 auto;
			}
			.left{
				/* border: solid #008000; */
				/* height: 100%; */
				width: 40%;
			}
			.left .left_top{
			}
			.left_top .left_top_btn{
				position: relative;
			}
			.right_top .left_top_btn button{
				position: absolute;
				right: 50px;
				top: 3px;
				z-index: 99;
				background-color: #0fd076;
				color: #FFFFFF;
				font-weight: 600;
				font-size: 17px;
				width: 100px;
				height: 40px;
			}
			.left_top h3{
				text-align: center;
				background-color: #a4ffd650;
				width: 200px;
				margin: 0 auto;
			}
			.left .left_top_list{
				/* display: flex; */
			}
			.right{
				/* border: solid #00AAFF; */
				width: 100%;
			}
			.right_top h3{
				text-align: center;
				background-color: #a4ffd650;
				width: 200px;
				margin: 0 auto;
			}
			.left_bottom h3{
				text-align: center;
				background-color: #a4ffd650;
				width: 200px;
				margin:19PX auto;
			}
			.right_top .mylist{
				/* margin-left: 85px; */
				height: 195px;
				overflow: auto;
				/* border: #ffc072 solid; */
			}
			
			/* 走马灯 */
			.el-carousel__item h3 {
			    color: #475669;
			    font-size: 14px;
			    opacity: 0.75;
			    line-height: 150px;
			    /* margin: 0; */
			  }
			
			  .el-carousel__item:nth-child(2n) {
			     background-color: #99a9bf;
			  }
			  
			  .el-carousel__item:nth-child(2n+1) {
			     background-color: #d3dce6;
			  }
		</style>
	</head>
	<body>
		<div id="content">
			<!-- 左 -->
			<div class="left">
				<!-- 左上 -->
				<div class="left_top">
					<!-- 值班医生标题和预约按钮 -->
					<h3>今日值班医生</h3>
					
					<!-- 值班医生列表 -->
					<div class="left_top_list" >
						<el-table
						      :data="tableData"
						      style="width: 100%">
							  <el-table-column
							    prop="picture"
							    label="头像"
							    width="150">
								<!-- <img :src='getPictureUrl(picture)'> -->
							  </el-table-column>
						      <el-table-column
						        prop="name"
						        label="姓名"
						        width="170">
						      </el-table-column>
						      <el-table-column
						        prop="contactWay"
						        label="手机号"
								width="170"
								>
								</el-table-column>
						    </el-table>
					</div>
				</div>
				<div class="left_bottom">
					<h3>已预约排名</h3>
					<div class="bookedList">
						<el-table
						    :data="bookedList"
						    height="250"
						    border
						    style="width: 100%">
						    <el-table-column
						      prop="studentName"
						      label="姓名"
						      width="180">
						    </el-table-column>
						    <el-table-column
						      prop="appointmentTime"
						      label="日期"
						      width="180">
						    </el-table-column>
							<el-table-column
							  
							  label="状态"
							  width="180">
							  <template slot-scope='scope'>
								  {{scope.row.status | getstatus(scope.row.status)}}
							  </template>
							</el-table-column>
						  </el-table>
					</div>
				</div>
			</div>
			<div class="right">
				
				<div class="right_top">
					<!-- 我的预约信息 -->
					<div class="left_top_btn">
						<button type="button" @click="dialogVisible = true">我要预约</button>
					</div>
					<h3>我的预约</h3>
					<div class="mylist">
						<el-table
						      :data="myAppointment"
						      style="width: 100%">
						      <el-table-column
						        prop="studentName"
						        label="姓名"
						        width="100">
						      </el-table-column>
						      <el-table-column
						        prop="gender"
						        label="性别"
						        width="110">
						      </el-table-column>
						      <el-table-column
						        prop="contactWay"
						        label="手机号"
								 width="100">
						      </el-table-column>
							  <el-table-column
							    prop="appointmentType"
							    label="病因"
								 width="120">
							  </el-table-column>
							  <el-table-column
							    prop="status"
							    label="状态"
							  	width="120">
								<template slot-scope='scope'>
									{{scope.row.status | getstatus(scope.row.status)}}
								</template>
							  </el-table-column>
							  <el-table-column
							    prop="appointmentTime"
							    label="预约时间"
							  	width="160">
							  </el-table-column>
							  <!-- <template slot-scope='scope'>
							  	{{scope.row.appointmentTime|getApptime(scope.row.appointmentTime)}}
							  </template> -->
						    </el-table>
					</div>
					
					
				</div>
				<!-- 下 -->
				<div class="left_bottom">
					<!-- 走马灯 -->
					<div class="block">
					    <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
					    <el-carousel height="260px" >
					      <el-carousel-item v-for="item in imglist" :key="item.id">
							<img :src="item.idView" alt="" width="100%" height="100%">
					      </el-carousel-item>
					    </el-carousel>
					  </div>
				</div>
			</div>
			
			<el-dialog
			  title="请输入预约信息"
			  :visible.sync="dialogVisible"
			  width="30%"
			  :before-close="handleClose">
			  <el-input type="input" placeholder="请输入姓名" v-model='appInfo.studentName'></el-input>
			  <div style="margin: 10px 0;"></div>
			  <el-input type="input" placeholder="请输入性别" v-model='appInfo.gender'></el-input>
			  <div style="margin: 10px 0;"></div>
			  <el-input type="input" placeholder="请输入手机号码" v-model='appInfo.contactWay'></el-input>
			  <div style="margin: 10px 0;"></div>
			  <el-select v-model="appInfo.appointmentType" placeholder="请选择就诊类型">
			      <el-option
			        v-for="(item,index) in options"
			        :key="index"
					:value='item'
			        >
					{{ item }}
			      </el-option>
			  </el-select>
			  <div style="margin: 10px 0;"></div>
			  <div class="block">
			      <!-- <span class="demonstration">默认</span> -->
			      <el-date-picker
			        v-model="appInfo.appointmentTime"
			        type="datetime"
			        placeholder="选择日期时间">
			      </el-date-picker>
			    </div>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="appBtn()">确 定</el-button>
			  </span>
			</el-dialog>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#content',
			data() {
			    return {
					socket:null,
					dialogVisible: false,
					appInfo:{
					studentName:'',
					gender:'',
					contactWay:'',
					appointmentType: '',
					appointmentTime: '',
					},
					 imglist: [
					    {id:0,idView:'../img/src=http___img.alicdn.com_i4_624264029_O1CN011fdKDwFGOH3I9CV_!!624264029.jpg&refer=http___img.alicdn.webp'},
					    {id:1,idView:'../img/src=http___img.alicdn.com_i4_624264029_O1CN011fdKDwFGOH3I9CV_!!624264029.jpg&refer=http___img.alicdn.webp'},
					    {id:2,idView:'../img/src=http___img.alicdn.com_i4_624264029_O1CN011fdKDwFGOH3I9CV_!!624264029.jpg&refer=http___img.alicdn.webp'},
					    {id:3,idView:'../img/src=http___img.alicdn.com_i4_624264029_O1CN011fdKDwFGOH3I9CV_!!624264029.jpg&refer=http___img.alicdn.webp'}            
					],
					// 医生列表
			        tableData: [],
					// 我的预约信息
					myAppointment: [],
					// 全部预约信息
					bookedList: [],
					// 选择器
					options: [],
					        
					// 选择预约时间   
			    }
			},
			mounted() {
				let that = this;
				if(window.sessionStorage.getItem('islogin')){
					this.getDoctor()
					this.getMyApp()
					this.getBookedList()
					this.socket = new WebSocket('ws://47.115.220.91:8787/myWebSocket');
					
					this.socket.onopen = function(){
						console.log(that.socket);
						that.socket.send('$$' + that.studentName)
						console.log('socket连接成功')
						// 监听接收消息事件
						that.socket.onmessage = function(event) {
						  console.log('接收到消息：', event.data);
						  if("reload" == event.data){
							  that.getDoctor()
							  that.getMyApp()
							  that.getBookedList()
						  }
						};
					}
				}else{
					window.location = '../login.html'
					alert('给我登录！！！')
				}
				this.getTypeList();
			},
			destroyed() {
				scoket.close()
			},
			 methods: {
				 async getTypeList(){
					 const {data:res} = await axios.get('http://47.115.220.91:8787/studentPages/getTypes')
					 this.options = res.data
				 },
				 
				 
			       handleClose(done) {
			              this.$confirm('确认关闭？')
			                .then(_ => {
			                  done();
			                })
			                .catch(_ => {});
			            },
					// 获取值班医生
					async getDoctor(){
						const {data: res } = await axios.get('http://47.115.220.91:8787/studentPages/getOnlineDoctor')
						
						this.tableData = res.data
						console.log(res)
					},
					getPictureUrl(picName){
						return 'http://localhost:8787/commons/image?picName'+ picName
					},
					// 获取我的预约信息
					async getMyApp(){
						let studentName = window.sessionStorage.getItem('studentName')
						const {data: res } = await axios.get('http://47.115.220.91:8787/studentPages/getOnes?studentName='+ JSON.parse(studentName))
						console.log('xs',res)
						this.myAppointment = res.data
					},
					// 获取全部预约排名
					async getBookedList(){
						const {data: res } = await axios.get('http://47.115.220.91:8787/studentPages')
						console.log('bl',res)
						this.bookedList = res.data
					},
					// 我要预约功能
					async appBtn(){
						for(var item in this.appInfo){
							if(!this.appInfo[item]){
								return alert('给我填完')
							}
						}
						// console.log(this.appInfo.appointmentTime.valueOf())
						// console.log(new Date().valueOf())
						if(this.appInfo.appointmentTime.valueOf() < new Date().valueOf()){
							alert("请选择正确的时间")
						}
						console.log(this.appInfo)
						this.appInfo.appointmentTime = this.getApptime
						console.log(this.appInfo)
						const {data:res} = await axios.post('http://47.115.220.91:8787/studentPages',this.appInfo)
							this.dialogVisible = false
							Object.keys(this.appInfo).forEach(key => (this.appInfo[key] = ''));
							this.getDoctor()
							this.getMyApp()
							this.getBookedList()
						
					}
			    },
				// 全部预约状态
				filters:{
				    getstatus(value){
				        if(value === '0'){
							return '待开始'
						}else if(value === '1'){
							return '接诊中'
						}else if(value === '2'){
							return '已完成'
						}else{
							return '已错过'
						}
					},
					getApptime(Time){
						return moment(Time).format('YYYY-MM-DD')
					}
				},
				// computed:{
				// 	getApptime(Time){
				// 		return moment(Time).format('YYYY-MM-DD')
				// 	}
				// },
		})
	</script>
</html>
